<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(tree)"/>
<body>
    <div id="app" v-cloak>
        <div>
            <Card>
                <!--模糊搜索区域-->
                <template>
                    <div style="margin-bottom: 8px;margin-top: 8px;">
                        <i-input placeholder="输入内容"  v-model="org.description"  style="width: 300px"></i-input>
                        <i-button type="primary"  icon="ios-search" @click="load(0)">搜索</i-button>
                        <i-button type="primary"  icon="ios-redo" @click="reload()" >重置</i-button>
<!--                        <i-button type="primary" style="float:right;" icon="md-add" @click="add()">新增</i-button>-->
                    </div>
                </template>
                <template>
                    <i-table size="small" :columns="tableTitle"  :data="tableData">
                        <template slot-scope="tableScope" slot="action">
                            <i-button type="primary" size="small" icon="md-create" ghost class="table-btn" @click="edit(tableScope.row)">修改</i-button>
                            <i-button type="primary" size="small" icon="md-trash" ghost class="table-btn" @click="remove(tableScope.row)">删除</i-button>
                            <i-button type="primary" size="small" icon="md-add" ghost class="table-btn" @click="add(tableScope.row)">新增</i-button>
                        </template>
                    </i-table>
                    </br>
                    <Page  style="float: right;" :current="org.pageNumber" :total="tableSize" :page-size="org.pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer show-total></Page>
                    </br>
                </template>
            </Card>
        </div>
    </div>
<div th:replace="common/foot :: foot(jquery、tree)"></div>
<script th:inline="none">
var vm = new Vue({
    el: '#app',
    data: {
        okUtils:null,
        okLayer:null,
        tableTitle : [ {
            title: '序号',
            minWidth : 100,
            render: function(h, params) {
                return h('span', params.index + (vm.org.pageNo- 1) * vm.org.pageSize + 1);
            }
        },{
            key : "code",
            title : "单位代码",
            minWidth:100
        },{
            key : "name",
            title : "单位名称",
            minWidth:100
        },{
            key : "fullName",
            title : "单位全称",
            minWidth:100
        },{
            key : "gmtCreate",
            title : "创建时间",
            minWidth:150
        },{
            title : '操作',
            key : 'action',
            minWidth : 200,
            fixed : 'right',
            align : 'center',
            slot:'action'
        } ],
        tableData : [],
        org : {
            pageSize : 10,
            pageNo : 1,
            description:'',
            parentId:0,
            parentName:''
        },
        tableSize : 0,
    },
    methods: {
        tree : function() {
            vm.okUtils.ajax("/sys/org/select", "post", {parentId: null}, false).done(function (response) {
                ztree = $.fn.zTree.init($("#orgTree"), setting, response.msg);
            }).fail(function (error) {
                console.log(error)
            });
        },
        load : function() {
            var that = this;
            vm.okUtils.ajaxCloud({
                url:"/sys/org/list",
                param : vm.org,
                success : function(result) {
                     that.tableData = result.msg.pageData;
                     that.tableSize = result.msg.totalCount;
                }
            });
        },
        reload : function(){
            vm.org.parentId = 0;
            vm.org.description = "";
            vm.org.pageSize = 10;
            vm.org.pageNo = 1;
            this.load();
        },
        changePage : function(pageNo) {
            vm.org.pageNo = pageNo;
            vm.load();
        },
        changePageSize : function(pageSize) {
            vm.org.pageSize = pageSize;
            vm.load();
        },
        edit : function(org) {
            vm.okUtils.dialogOpen({
                title: '修改',
                url: "sys/org/form.html",
                scroll : true,
                width: '40%',
                height: '90%',
                success : function(dialog) {
                    dialog.vm.org = JSON.parse(JSON.stringify(org))
                },
                yes : function(dialog) {
                    dialog.vm.acceptClick(vm);
                }
            });
        },
        add:function(org){
            vm.okUtils.dialogOpen({
                title: '新增',
                url: "sys/org/form.html",
                scroll : true,
                width: '40%',
                height: '90%',
                success : function(dialog) {
                    if(org!=undefined){
                       dialog.vm.org.parentId = org.orgId;
                       dialog.vm.org.parentName = org.name;
                    }else{
                       dialog.vm.org.parentId = vm.org.parentId;
                       dialog.vm.org.parentName = vm.org.parentName;
                    }
                },
                yes : function(dialog) {
                    dialog.vm.acceptClick(vm);
                }
            });
        },
        remove:function(org) {
             vm.okLayer.confirm("删除需谨慎！你确定要删除吗？", function () {
                vm.okUtils.ajaxCloud({
                    url:"/sys/org/delete",
                    param : {orgId: org.orgId},
                    success : function(result) {
                        vm.okLayer.msg.greenTick(result.msg, function () {
                             vm.load();
                        });
                    }
                });
             })
        }
    },
    created: function() {
        var that = this;
        layui.use(["okUtils", "okLayer"], function () {
             that.okUtils = layui.okUtils;
             that.okLayer = layui.okLayer;
             that.load();
        });
    }
});
</script>
</body>
</html>
